<template>
    <div>
        <group>
            <p class="cz_con_info">请选择充值金额（1元=100K币）</p>
             <checker
                v-model="money"
                default-item-class="demo-item"
                selected-item-class="demo-item-selected"
                >
                <checker-item v-for="(item,index) in mianzhi" :key="item.id" :value="item.value">{{item.value}}</checker-item>
            </checker>
             <x-input title="自定义"  placeholder="自定义金额为大于5的整数金额"></x-input>
            <x-button type="warn" @click.native="czbtn">立即支付</x-button>
            <div>
                <confirm v-model="showConfirm"
                title="提醒"
                @on-cancel="onCancel"
                @on-confirm="onConfirm"
               >
                    <p style="text-align:center;">你确认充值?</p>
                </confirm>
            </div>            
        </group>
    </div>
</template>

<script>
    export default {
        name: 'zifu',
        data () {
            return {
                money:1,
                mianzhi: [
                    {id: 1, value: '￥15'},
                    {id: 2, value: '￥40'},
                    {id: 3, value: '￥60'},
                    {id: 4, value: '￥100'},
                    {id: 5, value: '￥300'},
                    {id: 6, value: '￥500'}
                ],
                showConfirm: false
            }
        },
        methods: {
            czbtn () {
                this.showConfirm = true;
            },
            onConfirm() {

            },
            onCancel () {

            }
        }
    }
</script>

<style scoped>
    .cz_con_info{
        padding:10px;
    }
    .demo-item {
    margin:3px;
    width: 100px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    }
    .demo-item-selected {
    background: #ffffff url(../../../assets/img/select.png) no-repeat right bottom;
    border-color: #ff4a00;
    }
</style>